<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue学习使用</title>
  <!-- 第1步： 引入vue库文件 -->
  <script src="./js/vue.js"></script>
  <style>
    a {
      font-size: 30px;
      color: blue;
    }
  </style>
</head>

<body>
  <!-- 第2步：挂载点 -->
  <div id="app1">
    <!-- <div v-red v-if="isShow">
      <input type="text" v-model="title">
    </div> -->
    <div v-red>{{title}}</div>
    <button v-auth>查看工资</button>
  </div>
  <div id="app2">
    <h3 v-red>我是一个标题222</h3>
  </div>

  <!-- 第3步：实例化vue -->
  <script>
    // 定义自定义指令
    // 全局 和 局部
    // 全局定义，所有的组件或vue的实例都会生效，可以使用
    // 对象写法，它提供5个钩子函数
    // Vue.directive('指令名称，不需要写v-开头',对象或函数)
    /* Vue.directive('red', {
      // bind 第一次绑定到元素时调用
      bind(el, bindings) {
        console.log('bind');
        // 通过dom操作来完成对于当前绑定的标签添加css样式
        // el.style.color = 'red'
        // el.style.fontSize = '30px'
        // cssText方案，现在推荐
        // el.style.cssText = 'font-size: 30px;\
        //                     color: blue;'
        el.style.cssText = `color:red;font-size:30px`
      },
      // inserted
      inserted(el, bindings) {
        console.log('inserted');
      },
      // update
      update(el, bindings) {
        console.log('update');
      },
      // componentUpdate
      componentUpdated(el, bindings) {
        console.log('componentUpdated');
      },
      // unbind
      unbind(el, bindings) {
        console.log('unbind');
      },
    }) */

    const vm1 = new Vue({
      el: '#app1',
      data: {
        isShow: true,
        title: '我是一个标题111'
      },
      // 定义局部指令，只有当前的实例能用
      directives: {
        red: {
          // bind它还没有绑定到父元素中,初始化
          bind(el) {
            el.style.cssText = `color:red;font-size:30px`
            const divDom = document.createElement('div')
            divDom.innerHTML = '我是它的兄弟'
            el.appendChild(divDom)
          },
          // inserted(el) {
          //   console.log(el.parentNode);
          // }
        },
        auth: {
          inserted(el) {
            // query/search 字符串  ==> 对象
            // if (location.search != '?username=admin') {
            //   el.remove()
            // }
            // URLSearchParams它是html5提供的新的Api方法,用于获取url地址中的search转为对象
            let urlSearch = new URLSearchParams(location.search)
            // console.log(urlSearch.get('username'));
            if (urlSearch.get('username') != 'admin') {
              // 以前兼容性更好的写法,但是现在可以不管
              // el.parentNode.removeChild(el)
              el.remove()
            }
          }
        }
      }
    })

    const vm2 = new Vue({
      el: '#app2',
      data: {
      },
      directives: {
        red: {
          bind(el) {
            el.style.cssText = `color:blue;font-size:30px`
          }
        }
      }
    })
  </script>

</body>

</html>